<template>
  <view
    class="totop fixed-top animated"
    :class="visible ? 'fade-in' : 'dn'"
    :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }"
    @tap.stop="totop"
  >
    <text class="iconfont icon-zhiding" />
  </view>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps({
    top: {
      type: Number,
      default: 100,
    },

    right: {
      type: String,
      default: '30',
    },
    bottom: {
      type: String,
      default: '30',
    },

    duration: {
      type: Number,
      default: 120,
    },
    scrollTop: {
      type: Number,
      default: 0,
    },
  });

  const emits = defineEmits(['to']);

  watch(
    () => props.scrollTop,
    (nval, oval) => {
      s_top.value = nval;
      change();
    },
  );

  const s_top = ref(0);
  const visible = ref(false);

  const totop = () => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: props.duration,
    });

    emits('to', {
      type: 'to',
      scrollTop: s_top.value,
    });
  };

  const change = (scrollTop?: any) => {
    s_top.value = scrollTop;
    if (s_top.value > props.top) {
      if (!visible.value) {
        visible.value = true;
      }
    } else {
      if (visible.value) {
        visible.value = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .totop {
  }
</style>
